import { useState, useEffect } from "react";
import { Modal, Input } from "antd";
import { observer } from "Mobx-react";
import { questionnaire } from "@/stores/questionnaire";
import { modalState } from "@/stores/modalState";

const { TextArea } = Input;
function BatchAdd() {
  const [optionText, setText] = useState("");
  const [indexNum, setIndex] = useState(0);
  const isBatch = modalState.isBatch;

  useEffect(() => {
    setText(modalState.optionText);
    setIndex(modalState.indexNum);
  }, [isBatch]);

  const handleOk = () => {
    if (optionText.replace(/\s*/g, "") == "") {
      return Modal.warning({
        title: "提示",
        content: "添加内容必填"
      });
    }
    const id = questionnaire.question[indexNum].id;
    const controlLogic = questionnaire.controlLogic.filter(item => item.questionIds.includes(String(id)));
    const controlOption = questionnaire.controlOption.filter(item => item.childId === id || item.questionIds.includes(String(id)));
    //判断是否有逻辑关联
    if (controlLogic.length || controlOption.length) {
      Modal.confirm({
        title: "提示",
        content: `原有选项有关联控制逻辑，确认批量添加并同时删除原来的控制逻辑？`,
        okText: "确认",
        cancelText: "取消",
        onOk() {
          questionnaire.optionBatchAdd(indexNum, optionText);
          modalState.isBatch = false;
        }
      });
    } else {
      questionnaire.optionBatchAdd(indexNum, optionText);
      modalState.isBatch = false;
    }
  };

  const handleCancel = (e: any) => {
    if (e.target.className != "ant-modal-wrap") modalState.isBatch = false;
  };
  return (
    <Modal title="选项批量添加" width="500px" open={isBatch} onOk={handleOk} onCancel={handleCancel}>
      <TextArea autoSize={{ minRows: 5, maxRows: 5 }} value={optionText} onChange={e => setText(e.target.value)}></TextArea>
    </Modal>
  );
}
export default observer(BatchAdd);
